<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块元素</title>
</head>

<body>
    <!-- 块元素：不管空间有没有剩余，都要自己独占一行 -->
    <!-- 元素 ： 开始标签+内容+结束标签 -->


    <!-- emmet：快捷补全html内容的插件 -->
    <!-- 标题标签(自增符号快捷键：h$*6) -->
    <!-- 格式化快捷键：option+shift+f -->
    <h1>这是一级标签</h1>
    <h2>这是二级标签</h2>
    <h3>这是三级标签</h3>
    <h4>这是四级标签</h4>
    <h5>这是五级标签</h5>
    <h6>这是六级标签</h6>


    <!-- 段落标签 -->
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure cum hic reprehenderit veritatis quae magni fugit
        laudantium sunt a quidem nesciunt aliquam odit ea perferendis aspernatur, est officia! Vitae, iste.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure cum hic reprehenderit veritatis quae magni fugit
        laudantium sunt a quidem nesciunt aliquam odit ea perferendis aspernatur, est officia! Vitae, iste.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure cum hic reprehenderit veritatis quae magni fugit
        laudantium sunt a quidem nesciunt aliquam odit ea perferendis aspernatur, est officia! Vitae, iste.</p>

    <!-- div标签：划分区域，没什么特殊含义，容器 -->
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis quia explicabo aliquid nostrum repellat
        sequi veniam voluptates provident nam cumque rerum magni, iure ut, non ipsum facere tenetur exercitationem? Vel!
    </div>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis quia explicabo aliquid nostrum repellat
        sequi veniam voluptates provident nam cumque rerum magni, iure ut, non ipsum facere tenetur exercitationem? Vel!
    </div>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis quia explicabo aliquid nostrum repellat
        sequi veniam voluptates provident nam cumque rerum magni, iure ut, non ipsum facere tenetur exercitationem? Vel!
    </div>

    <!-- 列表:一堆相似的结构一般用列表来表示 -->
    <!-- 有序列表(快捷键：ol>li*5) -->
    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
    </ol>

    <!-- 无序列表(快捷键：ul>li*5) -->
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
    </ul>


</body>

</html>